{% extends 'base.html' %}

{% block header %}
  <h1>{% block title %}Room{% endblock %}</h1>
{% endblock %}

{% block content %}
<div class="container">
  <h5>Welcome to Room <span id="roomid">{{ session['roomid'] }}</span></h5>
  <form method="post">
    <input id="leaveroom" type="submit" name="button" value="leaveroom">
    <input id="start" type="submit" name="button" value="start">
  </form>
  <div id="players">
    Players in the room:
    <ul></ul>
  </div>

</div>
<script type="text/javascript" charset="utf-8">
  socket.emit('join', {roomid: $('#roomid').text()});
  console.log("tell server to join", $('#roomid').text());
  socket.on('room_sync', function(members, boxes) {
      // console.log(members);
      // console.log(boxes);
      var ul = $('#players ul');
      ul.empty();
      for(var k in members){
        ul.append(("<li>" + members[k]['name'] + "</li>"))
      }
  });
  $('#leaveroom').on('click', function(){
    socket.emit('leave', {roomid: $('#roomid').text()});
    console.log("tell server to leave", $('#roomid').text());
  });
</script>
{% endblock %}